<template>
  <div class="box">
          
    <!-- 轮播图 -->
    <div id="picture">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="01.jpg" alt="" /></van-swipe-item>
        <van-swipe-item><img src="02.jpg" alt="" /></van-swipe-item>
        <van-swipe-item><img src="03.jpg" alt="" /></van-swipe-item>
        <van-swipe-item><img src="04.jpg" alt="" /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 五个活动环节 -->
    <div id="xuyuan">
      <div class="wufen1">
        <span class="iconfont icon-ziyuan1"></span>
        <span class="wenzi">礼包中心</span>
      </div>
      <!--  -->
      <div class="wufen1">
        <span class="iconfont icon-huodongzhongxin"></span>
        <span class="wenzi">活动中心</span>
      </div>
      <!--  -->
      <div class="wufen1">
        <span class="iconfont icon-lianhe"></span>
        <span class="wenzi">抽免单</span>
      </div>
      <!--  -->
      <div class="wufen1">
        <span class="iconfont icon-tianjianghongbao"></span>
        <span class="wenzi">天降红包</span>
      </div>
      <!--  -->
      <div class="wufen1">
        <span class="iconfont icon-xuyuanchi"></span>
        <span class="wenzi">许愿池</span>
      </div>
    </div>
    <!-- 精彩活动 -->
    <div id="jingcai">
      <div class="huodong">{{ this.$store.state.text3 }}</div>
      <span class="iconfont icon-youjiantou-tianchong"></span>
    </div>
    <!-- 两张图片 -->
    <div id="Tpicture">
      <div class="lIng">
        <img src="02.jpg" alt="" />
        <span class="new">王者荣耀新皮肤</span>
      </div>
      <div class="cHou">
        <img src="03.jpg" alt="" />
        <span class="chouyichou">聚豆抽一抽</span>
      </div>
    </div>
    <!-- 精选资讯 -->
    <div id="jingxuan">
      <div class="zixun">{{ this.$store.state.text5 }}</div>
      <span class="iconfont icon-youjiantou-tianchong"></span>
    </div>
    <!-- 金克斯 -->
    <div id="jinkesi">
      <div class="pinglun">
        <div class="ying">评论赢20Q币奖励!单排冲分还是组排"开黑"?</div>
        <div class="xiamian">
          <span class="daxiaojie">大小姐金克丝</span>
          <span class="iconfont icon-xiaoyanjing">2.2k</span>
          <span class="iconfont icon-dianzan">55</span>
        </div>
      </div>
      <div class="tupian">
        <img src="04.jpg" alt="" />
      </div>
    </div>
    <!-- 特惠專區 -->
    <div id="tehui">特惠专区</div>
    <!-- 限時折扣 -->
    <div class="xianshi">
      <div class="zhekou" v-for="(v, i) in arr1" :key="i">
        {{ v.text }}
        <div class="inside">
          <img :src="v.img" alt="" />
          <div class="money1">
            <span class="rabit">{{ v.text1 }}</span>
            <span class="money2">￥{{ v.money }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 福利天地 -->
    <div id="fuli">福利天地</div>
    <!-- 三栏布局 -->
    <div class="libao">
      <div class="left1">
        <img :src="arr2[0]" alt="" />
      </div>
      <div class="right1">
        <img :src="arr2[1]" alt="" />
        <img :src="arr2[2]" alt="" />
      </div>
    </div>
    <!-- 新游预约 -->
    <div id="xinyou">
      <span class="yuyue">新游预约</span>
      <span class="iconfont icon-youjiantou-tianchong"></span>
    </div>
    <!--新游预约图片  -->
    <div class="shamo">
      <div class="heise" v-for="(v, i) in arr3" :key="i">
        <img :src="v.img" alt="" />
      </div>
    </div>
    <!-- 周边商城 -->
    <div id="zhoubian">
      <span class="shangcheng">周边商城</span>
      <span class="iconfont icon-youjiantou-tianchong"></span>
    </div>
    <!-- 瑶瑶公主 -->
    <div class="yaoyao">
      <div class="gongzhu" v-for="(v, i) in arr4" :key="i">
        <img :src="v.img" alt="" />
      </div>
    </div>
    <!-- 瑶瑶售价 -->
    <div class="shouban">
      <div class="Qban" v-for="(v,i) in arr5" :key="i">
        <p class="luling">{{v.text}}</p>
        <p class="price">￥{{v.text1}}</p>
      </div>
    </div>
    <!-- 看光了 -->
    <div class="taoyan">
      讨厌,都被你看光了~~~
    </div>
  </div>
</template>

<script>
import getapi from "@/apis/getapi.js";
export default {
  mounted() {
    getapi("/xiaojiang").then((ok) => {
      this.arr1 = ok.data.data;
      this.arr2 = ok.data.data1.map((item) => item.img);
      this.arr3 = ok.data.data2;
      this.arr4 = ok.data.data3;
      this.arr5 = ok.data.data4;
      // console.log(ok);
    });
  },
    data() {
    return {
      arr1: [],
      arr2: [],
      arr3: [],
      arr4: [],
      arr5: [],
    };
  },
}
</script>

<style scoped>
.box{
  width: 3.5rem;
  margin:  0 auto;
}
/* 轮播图 */
#picture {
  width: 100%;
  height: 1.6rem;
}

#picture img {
  width: 100%;
  height: 1.6rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  line-height: 1.6rem;
  text-align: center;
}
/* 五个活动环节 */
#xuyuan {
  width: 100%;
  height: 0.5rem;
  /* background-color: aqua; */
  display: flex;
  justify-content: space-between;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.wufen1 {
  display: flex;
  flex-direction: column;
}
.wufen1 :nth-child(1) {
  width: 100%;
  height: 74%;
  font-size: 0.24rem;
  text-align: center;
  color: #f39231;
  margin-top: 0.05rem;
}
.wenzi {
  width: 100%;
  height: 20%;
  margin-bottom: 0.12rem;
}
/* 精彩活动 */
#jingcai {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 0.2rem;
  /* background-color: burlywood; */
}
.huodong {
  font-size: 0.18rem;
  line-height: 0.2rem;
  font-weight: 900;
}
#jingcai span {
  font-size: 0.18rem;
  line-height: 0.2rem;
}
/* 两张图片 */
#Tpicture {
  width: 100%;
  height: 1.4rem;
  /* background-color: blueviolet; */
  margin-top: 0.15rem;
  display: flex;
  justify-content: space-between;
}
#Tpicture img {
  width: 100%;
  height: 1.2rem;
}
/* 图片下的文字 */
.lIng {
  display: flex;
  flex-direction: column;
}
.lIng span {
  font-size: 0.18rem;
  text-align: center;
}
.cHou {
  display: flex;
  flex-direction: column;
}
.cHou span {
  font-size: 0.18rem;
  text-align: center;
}
/* 精选资讯 */
#jingxuan {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 0.2rem;
  /* background-color: burlywood; */
  margin-top: 0.1rem;
}
.zixun {
  font-size: 0.18rem;
  line-height: 0.2rem;
  font-weight: 900;
}
#zixun span {
  font-size: 0.18rem;
  line-height: 0.2rem;
}
/* 金克斯 */
#jinkesi {
  width: 100%;
  height: 0.8rem;
  margin-top: 0.1rem;
  /* background-color: aquamarine; */
  display: flex;
  justify-content: space-between;
}
.pinglun {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ying {
  font-size: 0.16rem;
  font-weight: 500;
}
.xiamian {
  color: #cecece;
}
.xiamian :nth-child(2) {
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
/* 图片 */
.tupian {
  background-color: bisque;
  width: 80%;
}
.tupian img {
  width: 100%;
  height: 100%;
}
/* 特惠專區 */
#tehui {
  width: 100%;
  height: 0.2rem;
  margin-top: 0.3rem;
  /* background-color: aqua; */
  font-size: 0.18rem;
  font-weight: 600;
  line-height: 0.2rem;
}
/* 限时折扣 */
.xianshi {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  height: 0.8rem;
  /* background-color: aquamarine; */
  flex-direction: row;
  border: 0.01rem solid darkgray;
}
.zhekou {
  width: 50%;
  height: 0.2rem;
  /* background-color: #f39231; */
  flex-shrink: 0;
  font-size: 0.16rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.inside {
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
}
.inside img {
  width: 50%;
  height: 100%;
}
.money1 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.rabit {
  font-size: 0.14rem;
}
.money2 {
  color: #f39231;
}
/* 福利天地 */
#fuli {
  width: 100%;
  height: 0.2rem;
  margin-top: 0.15rem;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0.1rem;
}
/* 三栏布局 */
.libao {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  /* background-color: aquamarine; */
}
.left1 {
  width: 100%;
  height: 100%;
  /* background-color: yellow; */
}
.left1 img {
  width: 100%;
  height: 100%;
}
.right1 {
  width: 100%;
  height: 100%;
  background-color: burlywood;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.right1 img {
  width: 100%;
  height: 48%;
  background-color: chartreuse;
}
/* 新游预约 */
#xinyou {
  width: 100%;
  height: 0.2rem;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: space-between;
  /* background-color: blue; */
}
.yuyue {
  font-size: 0.16rem;
  font-weight: 600;
  line-height: 0.2rem;
}
#xinyou span {
  line-height: 0.2rem;
  font-size: 0.2rem;
}
.shamo {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  height: 0.8rem;
  /* background-color: aquamarine; */
  flex-direction: row;
  border: 0.01rem solid darkgray;
}
.heise {
  width: 50%;
  height: 0.8rem;
  background-color: #f39231;
  flex-shrink: 0;
  font-size: 0.16rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid black;
}
.heise img {
  width: 100%;
  height: 100%;
}
/* 周边商城 */
#zhoubian {
  width: 100%;
  height: 0.2rem;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: space-between;
  /* background-color: blue; */
}
.shangcheng {
  font-size: 0.16rem;
  font-weight: 600;
  line-height: 0.2rem;
}
#zhoubian span {
  line-height: 0.2rem;
  font-size: 0.2rem;
}
/* 瑶瑶公主 */
.yaoyao {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
}
.gongzhu {
  width: 100%;
  height: 1rem;
}
.gongzhu img {
  width: 100%;
  height: 100%;
}
/* 手办 */
.shouban {
  width: 100%;
  height: 0.4rem;
  /* background: #f39231; */
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-between;
}
.Qban{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 0.4rem;
  /* background-color: #4431f3; */
  /* border: 1px solid black; */
}
.price{
  color: #e64243;
  text-align: center;
}
.luling{
  text-align: center;
}
/* 讨厌 */
.taoyan{
  margin-top: 0.2rem;
  /* background-color: #f39231; */
  color: #b6b6b6;
  width: 100%;
  height: 0.2rem;
  text-align: center;
  line-height: 0.2rem;
}
</style>